<template>
  <div class="com-container">
    <div class="com-chart" ref="stock_ref"></div>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      echarts: null,
      echartsInit: null,
      allData: null,
      currentPage:0,
      timeId:null,
    };
  },

  mounted() {
    this.Init();
    this.getData();
    window.addEventListener("resize", this.screenData);
    this.screenData();
    this.starINterval();
  },

  destroyed(){
      window.removeEventListener('resize',this.screenData)
      clearInterval(this.timeId)
  },

  methods: {
    Init() {
      this.echarts = require("echarts");
      this.echartsInit = this.echarts.init(this.$refs.stock_ref, "chalk");
      const initOption = {
        title: {
          text: "|地区销售排行",
          left: 20,
          top: 20
        },
        
      };
      this.echartsInit.setOption(initOption);
    },

    getData() {
      this.axios.get("http://127.0.0.1:8888/api/stock").then(res => {
        this.allData = res.data;
        //console.log(this.allData)
        this.upData();
      });
    },

    upData() {
      const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"]
      ];
      const colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"]
      ];
      const star = this.currentPage*5
      const end =(this.currentPage+1)*5
      const Arr = this.allData.slice(star, end);
      //console.log(Arr)
      const seriesArr = Arr.map((item, index) => {
        return {
          //name: item.name,

          hoverAnimation: false,
          labelLine: {
            //引导线
            show: false
          },
          label: {
            //饼图图形上的文本标签，可用于说明图形的一些数据信息
            show: true,
            position: "center",
            color: colorArr[index][0]
          },

          type: "pie",
          // radius: [110, 100],
          center: centerArr[index],
          data: [
            {
              itemStyle: {
                color: new this.echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArr[index][0]
                  },
                  {
                    offset: 1,
                    color: colorArr[index][1]
                  }
                ])
              },
              name: item.name + "\n\n" + item.stock,
              value: item.sales
            },
            {
              value: item.stock,
              itemStyle: {
                color: "#333843"
              }
            }
          ]
        };
      });
      const upOption = {
        series: seriesArr
      };
      this.echartsInit.setOption(upOption);
    },

    starINterval(){
        if(this.timeId){
            clearInterval(this.timeId)
        }
       this.timeId = setInterval(() => {
           this.currentPage ++
           if(this.currentPage>1){
               this.currentPage =0
           }
           this.upData()            // 在更改完currentPage之后 , 需要更新界面
            
        }, 2000);
    },

    screenData() {
      const titleSize = (this.$refs.stock_ref.offsetWidth / 100) * 3.6;
      const innerSize = titleSize * 2.8;
      const outSize = titleSize * 2.4;
      const screenOption = {
          title: {
              textStyle: {
                fontSize: titleSize
              }
            },
        series: [
          {
            
            type: "pie",
            radius: [outSize, innerSize], //外圆环和内圆环的半径
            label:{
                fontSize:titleSize/2
            },
          },{
            
            type: "pie",
            radius: [outSize, innerSize], //外圆环和内圆环的半径
            label:{
                fontSize:titleSize/2
            },
          },
          {
            
            type: "pie",
            radius: [outSize, innerSize], //外圆环和内圆环的半径
            label:{
                fontSize:titleSize/2
            },
          },
          {
            
            type: "pie",
            radius: [outSize, innerSize], //外圆环和内圆环的半径
            label:{
                fontSize:titleSize/2
            },
          },
          {
            
            type: "pie",
            radius: [outSize, innerSize], //外圆环和内圆环的半径
            label:{
                fontSize:titleSize/2
            },
          }
        ]
      };
      this.echartsInit.setOption(screenOption);
      this.echartsInit.resize();
    }
  }
};
</script>